<template>
    <div id="useradmin">
        <el-button type="primary" style="margin-bottom: 10px;" @click="openUser()" size="default" icon="Plus">添加</el-button>
        <div class="tablecon" style="height: 600px;">
            <el-table id="out" border :data="userList">
                <el-table-column align="center" type="index" label="序号" width="60" />
                <el-table-column prop="username" label="账号" width="100" />
                <el-table-column prop="nickname" label="昵称" width="220" />
                <el-table-column prop="tel" label="联系方式" width="150" />
                <el-table-column label="角色" width="180">
                    <template #default="scope">
                        <div v-for="item in scope.row.roles">
                            ★ {{ item.name }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="部门" width="180">
                    <template #default="scope">
                        {{ scope.row.dept ? scope.row.dept.name : '' }}
                    </template>
                </el-table-column>
                <el-table-column label="" width="360">
                    <template #default="scope">
                        <el-button size="default" type="warning" @click="resetUser(scope.row)"
                            icon="Avatar">重置密码</el-button>
                        <el-button size="default" type="primary" @click="watchUserRole(scope.row)"
                            icon="View">角色</el-button>
                        <el-button size="default" type="success" @click="deptListDlg = true; userID = scope.row.id"
                            icon="Grid">部门</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="">
                    <template #default="scope">
                        <el-button size="default" type="info" @click="f_ShowUserInfo(scope.row)" icon="Edit">修改</el-button>
                        <el-button size="default" type="danger" v-if="loginname != scope.row.username"
                            @click="deluser(scope.row.id)" icon="Delete">删除</el-button>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="" label="" /> -->
            </el-table>
        </div>
        <pagination style="margin-top: 10px;" @sendsize="getsize" @sendpage="getpage" :page="page"></pagination>
        <!-- 用户弹框 -->
        <el-dialog v-model="userDlg" title="用户管理" width="400" align-center :before-close="cancle">
            <div style="margin: 10px;">
                <el-form :model="userForm" label-width="100" class="demo-form-inline">
                    <el-form-item label="用户名称">
                        <el-input v-model="userForm.username" placeholder="必须4位以上" style="width: 240px;" />
                    </el-form-item>
                    <el-form-item label="用户密码">
                        <el-input v-model="userForm.password" placeholder="请输入字母与数字混合密码" style="width: 240px;" />
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="addUser()" icon="Select">
                        确定
                    </el-button>
                    <el-button @click="cancle()" icon="Close">取消</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 用户角色弹框 -->
        <el-dialog v-model="roleDlg" title="角色管理" width="760" align-center>
            <div>
                <el-button type="success" @click="openRoleDlg()" icon="Plus" style="margin-bottom: 10px;">添加</el-button>
                <el-table border :data="userroleList" style="width: 100%">
                    <el-table-column type="index" label="序号" width="80" />
                    <el-table-column prop="name" label="角色名称" width="130" />
                    <el-table-column prop="remark" label="备注" width="360" />
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button type="danger" @click="DelRole(scope.row)" icon="Delete">删除</el-button>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="" label="" /> -->
                </el-table>
            </div>
            <template #footer>
                <div class="dialog-footer">


                    <el-button type="primary" @click="roleDlg = false; getUserList()" icon="Close">
                        关闭
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!--角色列表弹框 -->
        <el-dialog v-model="roleListDlg" title="角色列表" width="300" align-center :before-close="cancelRoleChoice">
            <div>
                <el-form :model="userroleForm" label-width="auto" style="max-width: 600px">
                    <el-form-item label="选择角色">
                        <el-select v-model="userroleForm.role_code" placeholder="请选择角色">
                            <el-option v-for="item in RoleList" :label="item.name" :value="item.code" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="addRole()" icon="Select">
                        确定
                    </el-button>
                    <el-button @click="cancelRoleChoice" icon="Close">取消</el-button>

                </div>
            </template>
        </el-dialog>
        <!--部门列表弹框 -->
        <el-dialog v-model="deptListDlg" title="部门列表" width="300" align-center :before-close="cancelDeptChoice">
            <div>
                <el-form :model="userdeptForm" label-width="auto" style="max-width: 600px">
                    <el-form-item label="选择部门">
                        <el-select v-model="userdeptForm.dept_code" placeholder="请选择部门">
                            <el-option v-for="item in DeptList" :label="item.name" :value="item.code" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="addDept()" icon="Select">
                        确定
                    </el-button>
                    <el-button @click="cancelDeptChoice" icon="Close">取消</el-button>

                </div>
            </template>
        </el-dialog>
    </div>

    <!-- 用户弹框 -->
    <el-dialog v-model="userInfoDlg" title="用户管理" width="500" align-center>
        <div style="margin: 10px;">
            <el-form :model="userForm" label-width="100" class="demo-form-inline">
                <el-form-item label="用户昵称：">
                    <el-input v-model="userForm.nickname" placeholder="" />
                </el-form-item>
                <el-form-item label="联系方式：">
                    <el-input v-model="userForm.tel" placeholder="" />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="upUser()" icon="Select">
                    确定
                </el-button>
                <el-button @click="userInfoDlg = false" icon="Close">取消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import $sys from "../../api/sys";
import pagination from '../../components/pagination.vue';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';

const loginname = ref(localStorage.getItem("username"));

const userList = ref([]);
const roleDlg = ref(false);
const userInfoDlg = ref(false);

const page = reactive({
    pagenum: 1,
    pagesize: 10,
    total: 0
})
onMounted(() => {
    getUserList();
    getRoleList();
    getDeptList();
});
function f_ShowUserInfo(obj) {
    console.log(111, obj);
    userForm.id = obj.id;
    userForm.nickname = obj.nickname;
    userForm.tel = obj.tel;
    userInfoDlg.value = true;
}

function upUser() {
    var data = {
        "id": userForm.id,
        "nickname": userForm.nickname,
        "tel": userForm.tel
    }
    $sys.upMyUser(data).then(res => {
        if (res.code == 200) {
            ElMessage({
                message: '操作完成！',
                type: 'success'
            })
            userInfoDlg.value = false;
            getUserList();
        }
    });
}

function deluser(id) {
    ElMessageBox.confirm(
        '是否删除？',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        $sys.delMyUser(id).then(res => {
            if (res.code == 200) {
                ElMessage({
                    message: '操作完成！',
                    type: 'success'
                });
                getUserList();
            }
        })
    })
}

function cancelRoleChoice() {
    roleListDlg.value = false;
    userroleForm.role_code = '';
}
function cancelDeptChoice() {
    deptListDlg.value = false;
    userroleForm.dept_code = '';
}
function DelRole(e) {
    ElMessageBox.confirm(
        '确定删除该角色?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        console.log(e);
        let obj = {};
        obj.role_code = e.code;
        obj.user_id = userID.value;
        $sys.DelUserRole(obj).then(res => {
            if (res.code == 200) {
                ElMessage({
                    message: '删除成功',
                    type: 'success'
                })
                let obj = {};
                obj.id = userID.value;
                watchUserRole(obj);
            }
        })
    })
}
const roleListDlg = ref(false);
const deptListDlg = ref(false);

const userroleForm = reactive({});
const userdeptForm = reactive({});

function addRole() {
    if (userroleForm.role_code == '' || !userroleForm.role_code) {
        ElMessage({
            message: '请选择角色',
            type: 'warning',
        })
    } else {
        userroleForm.user_id = userID.value;
        $sys.addUserRole(userroleForm).then(res => {
            if (res.code == 200) {
                ElMessage({
                    message: '添加成功',
                    type: 'success'
                })
                cancelRoleChoice();
                let obj = {};
                obj.id = userID.value;
                watchUserRole(obj);
            }
        })
    }
}
function addDept() {
    if (userdeptForm.dept_code == '' || !userdeptForm.dept_code) {
        ElMessage({
            message: '请选择部门',
            type: 'warning',
        })
    } else {
        userdeptForm.id = userID.value;
        $sys.addUserDept(userdeptForm).then(res => {
            if (res.code == 200) {
                ElMessage({
                    message: '操作成功',
                    type: 'success'
                })
                cancelDeptChoice();
                let obj = {};
                obj.id = userID.value;
                getUserList();
                // watchUserDept(obj);
            }
        })
    }
}
function openRoleDlg() {
    roleListDlg.value = true;
}
function openDeptDlg() {
    deptListDlg.value = true;
}
const RoleList = ref([]);
function getRoleList() {
    $sys.getRoleList().then(res => {
        if (res.code == 200) {
            RoleList.value = res.data;
        }
    })
}
const DeptList = ref([]);
function getDeptList() {
    $sys.DeptList().then(res => {
        if (res.code == 200) {
            DeptList.value = res.data;
        }
    })
}
const userroleList = ref([]);
const userID = ref('');
function watchUserRole(e) {
    userID.value = e.id;
    $sys.getRoleListByUser(e.id).then(res => {
        if (res.code == 200) {
            userroleList.value = res.data;
            roleDlg.value = true;
        }
    })
}
function addUser() {
    if (checkForm()) {
        $sys.userAdd(userForm).then(res => {
            if (res.code == 200) {
                ElMessage({
                    message: '添加成功',
                    type: 'success'
                });
                getUserList();
                initUserForm();
                userDlg.value = false;
            }
            else {
                ElMessage({
                    message: '操作失败，用户名称或密码不符合要求！',
                    type: 'warning'
                });
            }
        })
    }
}
const userDlg = ref(false);
const userForm = reactive({
    id: '',
    username: '',
    password: '',
    nickname: "",
    tel: ""
});
function cancle() {
    initUserForm();
    getUserList();
    userDlg.value = false;
}
function initUserForm() {
    userForm.username = '';
    userForm.password = '';
    userForm.nickname = '';
    userForm.tel = '';
}
function openUser() {
    initUserForm();
    userDlg.value = true;
}

function f_msg(msg) {
    ElMessage({
        message: msg,
        type: 'warning'
    });
}

function checkForm() {
    let flag = false;

    if (userForm.username.length < 4) {
        f_msg("用户名称需要4位以上！")
        return flag;
    }

    if (userForm.password.length < 4) {
        f_msg("用户密码需要6位以上！")
        return flag;
    }


    if (!userForm.username || userForm.username == '') {
        ElMessage({
            message: '用户名不能为空',
            type: 'warning'
        });
        flag = false;
    } else if (!userForm.password || userForm.password == '') {
        ElMessage({
            message: '用户密码不能为空',
            type: 'warning'
        });
        flag = false;
    } else {
        flag = true;
    }
    return flag;
}
function resetUser(e) {
    ElMessageBox.confirm(
        '密码将重置为：abc+123 是否继续？',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        $sys.resetPWD(e.id).then(res => {
            if (res.code == 200) {
                ElMessage({
                    message: '重置成功!',
                    type: 'success'
                })
            }
        })
    }).catch(() => {

    })

}
function getsize(e) {
    page.pagesize = Number(e);
    getUserList();
}
function getpage(e) {
    page.pagenum = Number(e);
    getUserList();
}
function getUserList() {
    $sys.getUserList(page).then(res => {
        if (res.code == 200) {
            page.total = res.data.count;
            userList.value = res.data.result;
        }
    })
}
</script>

<style scoped>
:deep(*) {
    font-size: medium;
}

#useradmin {
    background-color: #2F4052;
    width: 100%;
    padding: 0 10px;
    height: 780px;
    padding-top: 10px;
}

.el-form-item__label {
    color: deepskyblue;
}

.tablecon {
    overflow-y: auto;
}

.tablecon::-webkit-scrollbar {
    width: 5px;
}

.tablecon::-webkit-scrollbar-thumb {
    background-color: #ccc;
    /* 设置滚动条的颜色 */
    border-radius: 6px;
    /* 设置滚动条的圆角 */
}

.tablecon::-webkit-scrollbar-track {
    background-color: #888;
    border-radius: 6px;
    /* 设置滚动条的轨道颜色 */
}

:deep(.el-dialog) {
    background-color: #2F4052 !important;
}

:deep(.el-dialog__title),
:deep(.el-dialog__body) {
    color: white !important;
}
</style>

<style lang='less'>
#useradmin {
    .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
        background: none;
    }

    .el-table__inner-wrapper {
        &::before {
            display: none;
        }
    }

    // 头部样式
    .el-table__header-wrapper th {
        background-color: #2F4052;
        color: #fff;
    }

    // 内容行样色
    .el-table__row {
        background-color: #2F4052;
        color: #B2C9EE;
    }

    // 内容行边框
    .el-table__cell {
        border: 1 !important;
        border-color: #222e3b;
    }

    .el-table--border .el-table__inner-wrapper:after,
    .el-table--border:after,
    .el-table__border-left-patch {
        background-color: #222e3b;
    }

    //自定义斑马线和鼠标移入样式
    .el-table--enable-row-hover .el-table__body tr:hover:nth-child(even)>td {
        background-color: #263343 !important;
    }

    .el-table--enable-row-hover .el-table__body tr:hover:nth-child(odd)>td {
        background-color: #2F4052 !important;
    }

    .el-table__body tr:nth-child(even) {
        background-color: #263343;
        /* 偶数行（斑马线）的默认背景色 */
    }

    .el-table__empty-block {
        background-color: #233741;
    }

    .el-form-item__label {
        color: deepskyblue;
    }

}

</style>